<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
div[id='empDLG'] input{width: 100px;}
div[id='empDLG'] label{margin-right: 12px;}
</style>
<script type="text/javascript">
var empurl = "${pageContext.request.contextPath}/employee/addEmployees.html";
 $(function(){
	 $('#employeeAll').datagrid({
		 pageSize:200,
		 pageList:[200],
		 toolbar : "#empTool"}
	);
	 
	 refreshCompanyTree();
 })
 
 //刷新公司树
 function refreshCompanyTree() {
	 $('#shopTree').tree({
	        url:'${pageContext.request.contextPath}/shop/getShopTreeJson.html',
	        lines:true,
	        loadFilter: function(data){
	        	if (data.rows){
	        	return data.rows;
	        	}
	        },
	        onClick : function(node) {		
				if ($(this).tree('isLeaf',node.target)) {
					$("#employeeAll").datagrid(
									{
										url : 'employee/viewlistJson/'
												+ node.id
												+ '.html',
										method : 'get'
									});
				}
	        }
	       });
 }
 
 function settingShop(mark){
		$.ajax({
			type : "POST",
			url : "shop/getParentShopJson.html",
			dataType : "json",
			success : function(json) {
				$("#"+mark).combobox({
					data : json.rows,
					valueField : 'id',
					textField : 'text',
				});				
				$("#"+mark).combobox('setValue', json.rows[0].id);
				$("#"+mark).combobox('setText', json.rows[0].text);
				$("#"+mark).combobox('select', json.rows[0].id);
			}
		});
	}
 // 门店
	function newShop() {
		$("#shopfm input").val('');
		settingShop('parentShopId1');
		$("#shopDLG").dialog('open');
	}
 function saveShop() {
		$('#shopfm').form('submit', {
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show({
						title : 'Error',
						msg : result.errorMsg
					});
				} else {

					$('#shopDLG').dialog('close'); // close the dialog
						refreshCompanyTree();
					$.messager.show({
						title : '成功',
						msg : "数据添加成功"
					});
				}
			}
		});
	}
//员工

function newEmployee() {
	$("#empDLG input[name!='e_pass']").val('');
	 $("#e_id").val('0');
	 $('#startDay').datebox();
	 $("#role").combobox();
	 $("#shopId").combobox();
	 $("#gender").combobox();
	 $("#imgdiv").html("<img src='${pageContext.request.contextPath}/fileupload/defaultUser.png'height='75px;'/>");
	$("#empDLG").dialog('open');
	getAllShop();
}


function getAllShop(){
	//获取所有门店
	 $.ajax({  
		   type: "POST",  
		   url: "shop/getChildrenShopJson.html",  
		   dataType:"json",  
		   success: function(json){  
		     $("#shopId").combobox({  
		        data:json.rows,  
		        valueField:'shopId',  
		        textField:'shopName'
		     });
		     $.each(json.rows,function(index,name) {
					$("#shopId").combobox('setValue', name.shopId);
					$("#shopId").combobox('select', name.shopId);
					$("#shopId").combobox('setText', name.shopName);

		     });
		   }
		}); 
}

function saveEmp() {
	$('#empfm').form('submit', {
		url:empurl,
		onSubmit : function() {
			return $(this).form('validate');
		},
		success : function(result) {
			var result = eval('(' + result + ')');
			if (result.errorMsg) {
				$.messager.show({
					title : 'Error',
					msg : result.errorMsg
				});
			} else {
				 $('#employeeAll').datagrid('reload');
				$('#empDLG').dialog('close'); // close the dialog
				$.messager.show({
					title : '成功',
					msg : "数据操作成功"
				});
			}
		}
	});
}
//双击员工
 $('#employeeAll').datagrid({onDblClickRow:function(index,row){
		if(row.e_sn !='admin'){
			newEmployee();
			fillData(row);
		}
 }});
 
 function fillData(row){
	 $("#e_id").val(row.e_id);
	 $("#e_sn").val(row.e_sn);
	 $("#e_sn").attr("readonly","readonly");
	 $("#e_pass").val(row.e_pass);
	 $("#e_name").val(row.e_name);
	 $("#idcard").val(row.idcard);
	 $("#work").val(row.work);
	 $("#e_phone").val(row.e_phone);
	 $("#qq").val(row.qq);
	 $("#employeeMark").val(row.employeeMark);
	 $("#volcation").val(row.volcation);
	 $("#position").val(row.position);
	 $("#startDay").datebox('setValue',row.startDay);
	 $("#gender").combobox('setValue', row.gender);
	 $("#gender").combobox('select', row.gender);
	 $("#gender").combobox('setText', row.gender);
	 $("#role").combobox('setValue', row.roleId);
	 $("#role").combobox('select', row.roleId);
	 $("#role").combobox('setText', row.role);
	 $("#imgdiv").html("<img src=${pageContext.request.contextPath}/fileupload/"+row.e_photo+" height='75px;'/>");
	 
 }
 
 function freezenUser() {
		 var row = $('#employeeAll').datagrid('getSelected');
		 if (row){	 	
			 $.ajax({  
				   type: "POST",  
				   url: "${pageContext.request.contextPath}/employee/freeze/"+row.e_sn+".html",  
				   dataType:"json",  
				   success: function(json){  
						 if(json.errorMsg){
							 $.messager.show({
								 title:'错误',
								 msg:json.errorMsg,
								 timeout:5000,
								 showType:'slide'
								 });
						 } else{
							 $('#employeeAll').datagrid('reload');
								$.messager.show({
									title : '成功',
									msg : "数据操作成功"
								});
						 }
					  
				   }
				}); 
		 }
	 }
	 
	function activateUser() {
		 var row = $('#employeeAll').datagrid('getSelected');
		 if (row){
			 $.ajax({  
				   type: "POST",  
				   url: "${pageContext.request.contextPath}/employee/activate/"+row.e_sn+".html",  
				   dataType:"json",  
				   success: function(json){  
						 if(json.errorMsg){
							 $.messager.show({
								 title:'错误',
								 msg:json.errorMsg,
								 timeout:5000,
								 showType:'slide'
								 });
						 } else{
								 $('#employeeAll').datagrid('reload');
								$.messager.show({
									title : '成功',
									msg : "数据操作成功"
								});
						 }
					  
				   }
				}); 
		 }
		
	 }
 </script>
 <div id="empTool">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-lock" plain="true" onclick="freezenUser()">冻结</a>		
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-unlock" plain="true" onclick="activateUser();">解冻</a>	
</div>    
<div style="width: auto; margin-bottom: 3px; height: 30px; border: 1px solid #ddd; padding-top: 3px;">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newShop()">添加门店</a>	
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newEmployee()">添加员工</a>	
</div>
 <div class="easyui-layout" style="width:auto;height:450px; margin-top: 5px;">
 	<div data-options="region:'west'" title="公司管理" style="width:200px;">
 		<ul id="shopTree" class="easyui-tree">
 		</ul>
 	</div>
 	 <div data-options="region:'center',title:'员工列表'">
 	 	<table id="employeeAll" class="easyui-datagrid" style="width:auto;height:270px;"
 	 				url="${pageContext.request.contextPath}/employee/viewlistJson.html"
					singleSelect="true"
					pagination="true"
					pagePosition="both"
					fitColumns="true"
					rownumbers="true"
					>
			    <thead>
				    <tr>
				    <th data-options="field:'shopName',width:200">门店</th>
				   	<th data-options="field:'e_name',width:100">姓名</th>
				   	<th data-options="field:'e_sn',width:100">登陆账号</th>			    
				    <th data-options="field:'e_status',width:100">状态</th>
				 	<th data-options="field:'role',width:100">角色</th>
				    <th data-options="field:'position',width:100">职位</th>
				    <th data-options="field:'volcation',width:100">头衔</th>
				 	<th data-options="field:'e_phone',width:100">手机</th> 
				 	<th data-options="field:'qq',width:100">QQ</th>  			 	
				   	<th data-options="field:'work',width:100">证件号</th>
				   	<th data-options="field:'gender',width:100">性别</th>
				   	<th data-options="field:'idcard',width:100">身份证号</th>
				   	<th data-options="field:'startDay',width:100">工作时间</th>
					<th data-options="field:'employeeMark',width:100">备注</th> 
				    </tr>
			    </thead>
			   </table>
 	 </div>
 </div>
 <!-- 门店 -->
<div id="shopDLG" class="easyui-dialog"
	style="width: 400px; height: 200px; padding: 10px 20px" closed="true"
	title="新建门店">
	<form id="shopfm" method="post" action="${pageContext.request.contextPath}/shop/addShop.html">	
		<div class="ftitle">门店基本信息</div>
		<div class="fitem">
			<label>公司名称:</label> <select name="parentShopId1" id="parentShopId1"
				data-options="editable:false">
			</select>
		</div>
		<div class="fitem">
			<label>门店名称:</label> <input name="shopName" id="shopName"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,10]'" />
		</div>
		<div class="ftitle"></div>
		<div id="dlg-buttons" style="text-align: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick="saveShop()">保存</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel"
				onclick="javascript:$('#shopDLG').dialog('close')">取消</a>
		</div>
	</form>
</div>


<!-- 员工 -->
<div id="empDLG" class="easyui-dialog"
	style="width: 800px; height: 400px; padding: 10px 20px" closed="true"
	title="员工信息">
	<form id="empfm" method="post"  ENCTYPE="multipart/form-data">	
		<input type="hidden" name="e_id" id="e_id"/>
		<div class="ftitle">登录信息</div>
		<div class="fitem">
			<label>电子邮件:</label> <input name="e_sn" id="e_sn"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,100]'" />
			</select>
			<label>初始密码:</label> <input  type="text" name="e_pass" id="e_pass" readonly="readonly"
			 value="123456"/>
		</div>

		<div class="ftitle">基本信息</div>
		<div style="float: left;">
			<div class="fitem">
				<label>姓名:</label> <input name="e_name" id="e_name"
					class="easyui-validatebox"
					data-options="required:true,validType:'length[1,10]'" />
				</select>
				<label>性别:</label> <select name="gender" id="gender"
					data-options="editable:false">
						<option value="男" selected="selected">男</option>
						<option value="女">女</option>
					</select>
			</div>
			<div class="fitem">
				<label style="margin-right:0px;">身份证:</label> <input name="idcard" id="idcard"
				/>
				<label style="margin-right:0px;">工作证:</label> <input name="work" id="work"
				/>
			</div>
			<div class="fitem">
				<label>手机:</label> <input name="e_phone" id="e_phone"
				/>
				<label style="margin-right:16px;">QQ:</label> <input name="qq" id="qq"
				/>
			</div>
			<div class="fitem">
				<label>备注:</label> <input name="employeeMark" id="employeeMark"
				/>
				<label>头衔:</label> <input name="volcation" id="volcation"
				/>
			</div>
		</div>
		<div>
			<div class="fitem" id="imgdiv">
			</div>
			<div class="fitem">
				<input name="file" id="e_photo"
				type="file" />
			</div>
		</div>
		<div style="clear: both;">
		<div class="ftitle">职务信息</div>
		<div class="fitem">
			<label>职位:</label> <input name="position" id="position"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,10]'" />
			</select>
			<label>门店:</label> <select name="shopId" id="shopId"
				data-options="editable:false">
			</select>
		</div>
		<div class="fitem">
			<label>角色:</label><select name="role" id="role"
				data-options="editable:false">
				<option value="-1">系统管理</option>
				<option value="1">公司管理员</option>
				<option value="2">店长</option>
				<option value="3">经理</option>
				<option value="4">组长 </option>
				<option value="5">普通员工</option>
				<option value="6">访客</option>			
			</select>
			<label style="margin-right:0px;">工作时间:</label> <input name="startDay" id="startDay"
				/>
		</div>	
		<div id="dlg-buttons" style="text-align: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick="saveEmp()">保存</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel"
				onclick="javascript:$('#empDLG').dialog('close')">取消</a>
		</div>
		</div>
	</form>
</div>